import styles from '../index.module.less';
import { historyPositionFields } from '@/utils/helper';
import { useEffect, useRef, useState } from 'react';
import { ProTable, ProColumns } from '@ant-design/pro-components';
import FilterSelect from './FilterSelect';
import { formatNum, getUsdtNum, handleDirection, isSuccess, ysxYingKui } from '@/utils';
import { historyPositionApi, myHistoryPositionApi } from '@/api';
import dayjs from 'dayjs';
import PositionType from './PositionType';
import { YSXYingKui } from './CommonCpn';

export default function HistoryPosition({ tableWidth }: any) {
  const [loading, setLoading] = useState(false);
  const [list, setList] = useState<any>([]);
  const tableRef: any = useRef('');

  useEffect(() => {}, []);

  // 请求
  async function getData(val: any) {
    console.log('val: ', val);
    const params: any = {
      ...val,
    };
    if (params?.side === 'all') delete params.side;
    if (params?.pnl === 'all') delete params.pnl;
    console.log('params: ', params);
    setLoading(true);
    // const res: any = await historyPositionApi(params);
    const res: any = await myHistoryPositionApi(params);
    console.log('res: 历史仓位1', res);
    setLoading(false);
    if (!isSuccess(res)) return { data: [], total: 0 };
    const list = res?.data?.list;
    setList(list);
    console.log('list:历史仓位 ', list, list[0]);
  }

  const columns: ProColumns[] = [
    {
      title: '合约',
      dataIndex: 'contract',
      width: 150,
      render: (text: any, record: any) => <PositionType record={record} showFangXiang={false} />,
    },
    {
      title: '方向',
      dataIndex: 'newSide',
      render: (text: any, record: any) => (
        <div className={`${text === 'long' ? 'color-red' : 'color-green'}`}>
          {text === 'long' ? '做多' : '做空'}
        </div>
      ),
    },
    {
      title: '全部平仓时间',
      dataIndex: 'time',
      width: 130,
      render: (text: any) => <>{dayjs(text * 1000).format('YYYY-MM-DD HH:mm:ss')}</>,
    },
    {
      title: '状态',
      dataIndex: 'text',
      render: (text: any, record: any) => (
        <>{text.includes('liq-') || text.includes('-bc') ? '强制平仓' : '全部平仓'}</>
      ),
    },
    {
      title: '开仓时间',
      dataIndex: 'first_open_time',
      render: (text: any) => <>{dayjs(text * 1000).format('YYYY-MM-DD HH:mm:ss')}</>,
    },
    {
      title: '开仓均价',
      dataIndex: 'kaiCangJunJia',
      render: (text: any, record: any) => (
        <>
          {record.side === 'long' ? formatNum(record?.long_price) : formatNum(record?.short_price)}
        </>
      ),
    },
    {
      title: '平仓均价',
      dataIndex: 'pingCangJunJia',
      render: (text: any, record: any) => <>{formatNum(record?.price)}</>,
    },
    {
      title: '累计平仓量(USDT)',
      dataIndex: 'accum_size',
      render: (text: any, record: any) => <div>{Math.abs(getUsdtNum(record, text))} USDT</div>,
    },
    {
      title: '最大持仓量(USDT)',
      dataIndex: 'max_size',
      render: (text: any, record: any) => <div>{Math.abs(getUsdtNum(record, text))} USDT</div>,
    },
    // 已实现盈亏
    YSXYingKui(),
  ];

  return (
    <div className={`${styles.xxx} xxx`}>
      <FilterSelect fields={historyPositionFields} reload={getData} isNomalTime={true} />
      <ProTable
        rowKey="id"
        columns={columns}
        dataSource={list}
        actionRef={tableRef}
        search={false}
        options={false}
        scroll={{ x: tableWidth }}
        // pagination={false}
        loading={loading}
      />
      <div className={`${styles.xxx} xxx`}></div>
    </div>
  );
}
